<template>
  <div class="home-page">
    <swiper :home="home" />
    <v-nav :home="home" v-if="true" />
    <div class="nav" v-if="false">
      <div class="left">
        <div class="image a1" @click="goRepeat">
          <img src="/home-nav/1.jpg" />
        </div>
      </div>
      <div class="right">
        <div class="item">
          <div class="image a2" @click="goCenter">
            <img src="/home-nav/2.jpg" />
          </div>
        </div>
        <div class="item bottom">
          <div class="image a3" @click="goQrcode">
            <img src="/home-nav/3.jpg" />
          </div>
          <div class="image a4" @click="goTeam">
            <img src="/home-nav/4.jpg" />
          </div>
        </div>
      </div>
    </div>
    <!--  nav  -->
    <div class="go" v-if="false">
      <div class="a1" @click="goRepeat"></div>
      <div class="more">
        <div class="a2" @click="goCenter"></div>
        <div class="bottom">
          <div class="a3" @click="goQrcode"></div>
          <div class="h"></div>
          <div class="a4" @click="goTeam"></div>
        </div>
      </div>
    </div>
    <!--  product  -->
    <div class="product" v-if="false">
      <div class="title">
        <p>== 商品区 ==</p>
        <p class="x">GOODS AREA</p>
      </div>
      <ul class="list">
        <li v-for="(item, index) in products" :key="index" class="list-item" @click="handleClick(item)">
          <div class="image">
            <img :src="item.image.thumbnail_path" v-if="item.image && item.image.thumbnail_path" />
          </div>
        </li>
        <li class="list-item">
          <!-- 新模式 -->
          <div class="image" @click="goNewProduct">
            <img src="/new.png"/>
          </div>
        </li>
      </ul>
    </div>

    <!--  产品展示  -->
    <ul class="list new-product">
      <li v-for="(item, index) in products" :key="index" class="list-item" @click="handleClick(item)">
        <div class="image">
          <img :src="item.mainImage.thumbnail_path" v-if="item.mainImage && item.mainImage.thumbnail_path" />
        </div>
        <div class="title">{{item.title}}</div>
        <div class="title_sub">{{item.title_sub}}</div>
        <div class="price">￥:{{+item.price}}</div>
      </li>
    </ul>

    <!--  news  -->
    <ul class="news">
      <li v-for="(item, index) in news" :key="index" class="list-item" @click="handleNews(item)">
        <div class="title" v-if="false">{{item.title}}</div>
        <div class="image">
          <img :src="item.image.thumbnail_path" v-if="item.image && item.image.thumbnail_path" />
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import Swiper from './components/Swiper'
import Nav from './components/Nav'

import api from '@/api'
import base64 from '@/util/base64'
// import Loading from '@/components/Loading'
export default {
  name: 'Home',
  components: {
    Swiper,
    'v-nav': Nav,
  },
  data() {
    return {
      home: {},
      loading: false,
      news: [],
      products: []
    }
  },
  methods: {
    goNewProduct() {
      this.$router.push('/product/new-product')
    },
    /**
     * get uni home data
     * 1) vuex
     * 2) localstorage
     * 3) redis
     * 4) db
     */
    fetchData() {
      const home = this.$store.getters['Home/home']
      if (home === null) {
        this.loading = true
        api.Uni.homePage().then(response => {
          let { data } = response
          data = base64.parse(data)
          this.$store.dispatch('Home/set_data', data).then(() => {
            this.home = data
          })
        }).finally(() => {
          this.loading = false
        })
      } else {
        this.home = home
      }
      // console.log(this.home)
    },
    getNews() {
      // api.News.list().then(response => {
      //   let { data } = response
      //   data = base64.parse(data)
      //   this.news = data.list
      // })
      api.Uni.getGoNews().then(response => {
        let { data } = response
        data = base64.parse(data)
        this.news = data.list
        // console.log(this.news)
      }).finally(() => {
      })
    },
    goRepeat() {
      this.$router.push('/product/area/6')
    },
    goCenter() {
      // this.$router.push('/center')
      this.$router.push('/product/area/1')
    },
    goQrcode() {
      this.$router.push('/service/qr-code')
    },
    goTeam() {
      this.$router.push('/service/team/0')
    },
    // product
    getProduct() {
      api.Uni.getGoProduct().then(response => {
        let { data } = response
        data = base64.parse(data)
        this.products = data.list
        console.log(this.products)
      }).finally(() => {
      })
    },
    handleClick(item) {
      this.$router.push(`/product/detail/${item.id}`)
      // this.$router.push(`/product/category-product-list/${item.id}`)
    },
    handleNews(item) {
      this.$router.push(`/news/view/${item.id}`)
    }
  },
  created () {
    this.fetchData()
    this.getNews()
    this.getProduct()
  }
}
</script>

<style scoped lang="stylus">
// 产品样式定义
.new-product
  margin 10px
  padding 5px
  background white
  border-radius 5px
  .list-item
    margin-bottom 35px
    .image
      margin-bottom 10px
    .title, .title_sub
      line-height 25px
      text-align left
      font-size 16px
    .title
      font-weight 700
      font-size 18rpx
    .price
      color red
      font-weight 700
      font-size 20px
      text-align left
      margin 10px 0

.home-page
  margin 0
  .nav
    margin 10px 0
    //padding 0 10px
    display flex
    height 180px
    background white
    .left, .right
      flex 1
      padding 5px
      overflow hidden
      //background red
    .left
      height 180px
      .image
        height 170px
    .right
      height 180px
      display flex
      flex-direction column
      justify-content space-between
      .item
        height 50%
        .image
          height 80px
        &.bottom
          display flex
          justify-content space-between
          .image
            //width 25px
            //height 35px
            background red
  .product
    background white
    padding 10px
    .title
      background-image url("/n/0.jpg")
      background-repeat no-repeat
      //background-size 100% 100%
      // 355 150 px
      background-position center
      background-size cover
      height 150px
      text-indent -9999px
      margin-bottom 20px
      p
        font-weight 700
        font-size 24px
        color $main_color
        line-height 1.5em
        &.x
          font-size 14px
    .list
      //margin-top 20px
      .list-item
        margin-bottom 10px
        //.image
        //  height 355px
  .news
    margin 10px 0
    padding 0 10px
    .list-item
      margin-bottom 10px
      background white
      .title
        line-height 30px
  .go
    background white
    margin 10px 0
    padding 0 10px
    min-height 100px
    display flex
    .a1
      flex 1
      //background red
      height 170px
      background-image url("/n/1.jpg")
      background-repeat no-repeat
      background-size 100% 100%
    .more
      flex 1
      //background blue
      display flex
      flex-direction column
      padding-left 5px
      .a2
        flex 1
        //background red
        background-image url("/n/2.jpg")
        //background-image url("/home-nav/2.png")
        background-repeat no-repeat
        background-size 100% 100%
      .bottom
        flex 1
        //background black
        display flex
        padding-top 5px
        .a3
          flex 1
          //background red
          background-image url("/n/3.jpg")
          background-repeat no-repeat
          background-size 100% 100%
        .a4
          flex 1
          //background red
          background-image url("/n/4.jpg")
          background-repeat no-repeat
          background-size 100% 100%
        .h
          width 5px
</style>
